<div class="thread-post-form"
    {% if post_box_id %}
        post_box_id="{{ post_box_id }}"
    {% endif %}
>

<div class="form-group row position-relative">
    <input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token }}" data-ays-ignore="true"/>

    {% if show_title %}
    <span class="edit_thread">
        Title: <input type="text" size="45" placeholder="Title" name="title" id="title" aria-label="Edit thread title" required/>
    </span>
    {% endif %}

</div>
<br/>
{% if show_post %}
    <div style="margin-bottom:10px;" class="form-group row position-relative">
        <div role="button" id="markdown_toggle_{{ post_box_id }}"
        class="markdown-toggle {{ render_markdown?"markdown-active":"markdown-inactive" }}"
        style="margin-right:10px;padding: unset;cursor: pointer; "
        title="Render markdown" onclick="$('#markdown_buttons_{{ post_box_id }}').toggle(); $(this).toggleClass('markdown-active'); $('#markdown_input_{{ post_box_id }}').val($('#markdown_input_{{ post_box_id }}').val() == 0? '1':'0');$('#markdown-info-{{ post_box_id }}').toggleClass('disabled');"><i class="fab fa-markdown fa-2x"></i></div>
        <input type="hidden" name="markdown_status" id="markdown_input_{{ post_box_id }}" value="{{ render_markdown?1:0 }}" />
        <a target=_blank href="https://submitty.org/student/discussion_forum#formatting-a-post-using-markdown/"><i id="markdown-info-{{ post_box_id }}" style="font-style:normal;" class="far fa-question-circle disabled"></i></a>
        &nbsp;&nbsp;
        <span style="display: {{ render_markdown?"block":"none" }}" id="markdown_buttons_{{ post_box_id }}">
            <button id="link_btn" type="button" title="Insert a link" onclick="addMarkdownCode(1, $(this).closest('.thread-post-form').find('[name=thread_post_content]'))" style="margin-right:10px;" class="btn btn-default">Link <i class="fas fa-link fa-1x"></i></button>
            <button id="code_btn" title="Insert a code segment" type="button" onclick="addMarkdownCode(0, $(this).closest('.thread-post-form').find('[name=thread_post_content]'))" class="btn btn-default">Code <i class="fas fa-code fa-1x"></i></button>
        </span>
    {% if show_merge_thread_button and core.getUser().accessGrading() %}
        <a class="btn btn-primary" id="merge-thread-btn" title="Merge Threads" onclick="$('#merge-threads').css('display', 'block');">Merge Threads</a>
    {% endif %}
    {% if show_lock_date and core.getUser().getGroup() <= 2 %}
        <label id="label_lock_thread" for="lock_thread_date"> Lock Thread Date
            <input class="date_picker" placeholder="Lock Thread Date" name="lock_thread_date" id="lock_thread_date" type="text">
        </label>
        <script>
            $(document).ready(function () {
                        flatpickr(".date_picker", {
                            plugins: [ShortcutButtonsPlugin(
                                    {
                                        button: [
                                            {
                                                label: "Now"
                                            },
                                            {
                                                label: "End of time"
                                            }
                                        ],
                                        label: "or",
                                        onClick: (index, fp) => {
                                            let date;
                                            switch (index) {
                                                case 0:
                                                    date = new Date();
                                                    break;
                                                case 1:
                                                    date = new Date("9998-01-01 00:00:00");
                                                    break;
                                            }
                                            fp.setDate(date, true);
                                        }
                                    }
                                )],
                            allowInput: true,
                            enableTime: true,
                            enableSeconds: true,
                            time_24hr: true,
                            dateFormat: "Y-m-d H:i:S"
                        });
            })
        </script>

    {% endif %}
    </div>
    <div class="form-group row">
        {% set min_height = (post_textarea_large?"40vmin":"100px") %}
        <textarea name="thread_post_content" id="thread_post_content" class="fill-available post_content_reply" style="resize:none;min-height:{{ min_height }};max-height:300px" rows="10" cols="30" placeholder="{{ post_content_placeholder }}" required aria-label="Thread Post Textarea" maxlength="{{ post_content_limit }}"
        onkeydown="submitNearestForm(event,$(this))"></textarea>
    </div>
<br/>
{% endif %}

{% if show_categories %}

    <div id="category-selection-container" class="form-group row thread-category-container inline-block">
        <label id="cat_label">Categories</label>
        <br />

        {% if categories | length == 0 %}
            <span class='category-list-no-element' >
                No categories exists please create one.
            </span>
        {% endif %}
        <div id='categories-pick-list'>

        {% for category in categories %}
            <a class="btn cat-buttons" data-color="{{ category.color }}" aria-labelledby="cat_label" style="word-wrap: break-word; background-color: {{ category.color }}; color: white; max-width: 350px; text-align: left !important; white-space: unset !important;">{{ category.category_desc }}
                <input type="checkbox" name="cat[]" value="{{ category.category_id }}" aria-label="Category {{ category.category_desc }}">
            </a>
        {% endfor %}
    </div>
    <script type="text/javascript">
    $(function() {
        refreshCategories();
    });
    </script>
    </div>
{% endif %}
<div class="form-group row thread-attachment-container">
    {% if post_box_id %}
        <span class="inline-block">
            {# uploadID and input-file + Index required for drag-and-drop.js #}
            <div class="upload_attachment_box cursor-pointer" id="upload{{ post_box_id }}">
                <label id="file_input_label" class="btn btn-default">Upload Attachment</label>
                <input type="file" accept="image/*" aria-labelledby="file_input_label" id="input-file{{ post_box_id }}" style="display: none;" onchange="addFilesFromInput({{ post_box_id }});testAndGetAttachments({{ post_box_id }}, true);" multiple />
                <br>
                <table class="file-upload-table" id="file-upload-table-{{ post_box_id }}"></table>
            </div>
        </span>
        <br style="margin-right:1rem;">

        {% if attachment_script %}
            {# To be executed at last attachment box #}
            <script type="text/javascript">
                $(function() {
                    $('div.upload_attachment_box').on('DOMNodeInserted',function(e){
                        var part = get_part_number(e);
                        if(isNaN(parseInt(part))) {
                            return;
                        }
                        var target = $(e.target);
                        var file_object = null;
                        var filename = target.attr("fname");
                        for (var j = 0; j < file_array[part-1].length; j++){
                            if (file_array[part-1][j].name == filename) {
                                file_object = file_array[part-1][j];
                                break;
                            }
                        }
                        var image = document.createElement('div');
                        $(image).addClass("thumbnail");
                        $(image).css("background-image", "url("+window.URL.createObjectURL(file_object)+")");
                        target.prepend(image);
                    });

                    // Attachments on Create Thread
                    var part = "{{ post_box_id }}";
                    initializeDragAndDrop();
                    createArray(part);
                    $(".upload_attachment_box").each(function() {
                        this.addEventListener("click", clicked_on_box, false);
                    });
                });
            </script>
        {% endif %}
    {% endif %}
    <span class="inline-block right-zero">
        {% if show_anon %}
            <label>Anonymous (to class)? <input type="checkbox" class="thread-anon-checkbox" id="{{ anon_edit_post_id | default('thread_post_anon') }}" aria-label="Anonymous (to class)?" name="Anon" value="Anon" data-ays-ignore="true"/></label>
        {% endif %}
        {% if show_thread_status %}
        <select id="thread_status" name="thread_status" data-ays-ignore="true" aria-label="Select thread status">
            <option value="0">Comment</option>
            <option value="-1" selected="selected">Unresolved</option>
            <option value="1">Resolved</option>
        </select>
        {% endif %}
        {% if show_announcement and core.getUser().accessFullGrading() %}
            {% set announcement_text = email_enabled ? "Announcement?(w/ notification and email)" : "Announcement?(w/ notification)" %}
            <label class="inline-block" for="Announcement">{{ announcement_text }}</label>
            <input type="checkbox" class="thread-announcement-checkbox" name="Announcement" value="Announcement" data-ays-ignore="true"/>
        {% endif %}
        {% if show_cancel_edit_form %}
        <a onclick="$('#edit-user-post').css('display', 'none');
                 $(this).closest('.thread-post-form').find('[name=thread_post_content]').val('');
                 $('#title').val('');
                 $(this).closest('form').trigger('reinitialize.areYouSure');"
                     class="btn btn-default close-button">Cancel</a>
        {% endif %}
        <input type="submit" name="post" value="{{ submit_label }}" class="btn btn-primary inline-block" />

        {% if thread_resolve_state == 1 and show_unresolve %}
            <input type="hidden" name="thread_status" id="thread_status_input{{ post_box_id | length > 0 ? "_" ~ post_box_id : ""  }}" value="{{ thread_resolve_state }}" data-ays-ignore="true" />
            <input type="submit" name="post_and_unresolve" class="submit_unresolve btn btn-primary inline-block" {{ post_box_id | length > 0 ? "post_box_id=" ~ post_box_id : ""  }} value="{{ submit_label }} and Unresolve" />
        {% endif %}
    </span>
</div>
<br>
</div>
<script type="text/javascript">
    $(function(){
        $("input[name='title']").change(function () {
            $(this).val($.trim($(this).val()));
        });
    });

    function submitNearestForm(e, textarea){
        if ((e.keyCode == 10 || e.keyCode == 13) && (e.metaKey || e.ctrlKey)) {//ctrl+enter keys pressed
            var theForm = textarea.closest('form');
            if(theForm.hasClass('dirty')){
                theForm.trigger('reinitialize.areYouSure');
                theForm.submit();
            }
        }
    }
</script>
